/*
 * @Description: 轧机震动机组图变换策略
 * @Version: 1.0
 * @Date: 2024-02-27 15:31:57
 * @LastEditTime: 2024-03-13 17:22:44
 */
export function rollingMillStatusHandel(res:any) {
    if (!res || typeof res !== 'object') return;
    
    // API返回格式：{1号_std: "0", 2号_std: "0", ...}
    // SVG ID格式：5#_std_1, 5#_std_2, ..., 1#_std_1, 1#_std_2, ...
    
    let totalFound = 0;
    let totalNotFound = 0;
    
    Object.keys(res).forEach(apiKey => {
        // 将 "1号_std" 转换为 "1#_std"
        const svgPrefix = apiKey.replace('号', '#');
        
        const color = state[res[apiKey]] || "#CCCCCC";
        
        // 更新该机架的6个辊子
        for (let index = 1; index <= 6; index++) {
            const elementId = svgPrefix + "_" + index;
            let element: SVGElement | null = null;
            
            // 方法1: 直接通过 getElementById 查找（适用于直接加载的 SVG）
            element = document.getElementById(elementId) as SVGElement;
            
            // 方法2: 如果找不到，尝试通过 querySelector 查找（适用于通过 use 标签加载的 SVG）
            if (!element) {
                try {
                    // 尝试在整个文档中查找
                    element = document.querySelector(`[id="${elementId}"]`) as SVGElement;
                } catch (e) {
                    // 忽略选择器错误
                }
            }
            
            // 方法3: 如果还是找不到，尝试在 SVG symbol 内查找
            if (!element) {
                const symbolElement = document.querySelector('#svg-TCM2280');
                if (symbolElement) {
                    try {
                        element = symbolElement.querySelector(`[id="${elementId}"]`) as SVGElement;
                    } catch (e) {
                        // 忽略选择器错误
                    }
                }
            }
            
            // 方法4: 尝试通过 querySelectorAll 查找所有匹配的元素
            if (!element) {
                const allElements = document.querySelectorAll(`[id="${elementId}"]`);
                if (allElements.length > 0) {
                    element = allElements[0] as SVGElement;
                }
            }
            
            // 方法5: 查找所有匹配的元素（包括 symbol 中的），更新所有实例
            const allMatchingElements = document.querySelectorAll(`[id="${elementId}"]`);
            
            // 如果找到了元素，更新所有匹配的元素
            if (allMatchingElements.length > 0) {
                allMatchingElements.forEach((el) => {
                    const svgEl = el as SVGElement;
                    if (svgEl) {
                        updateElementColor(svgEl, elementId, color);
                        if (el === allMatchingElements[0]) totalFound++;
                    }
                });
            } else if (element) {
                // 如果只找到一个元素，使用原来的逻辑
                updateElementColor(element, elementId, color);
                totalFound++;
            } else {
                totalNotFound++;
            }
        }
    });
}

// 提取颜色更新逻辑为独立函数
function updateElementColor(element: SVGElement, elementId: string, color: string) {
    // 方法1: 设置 style.fill（最高优先级）
    if (element.style) {
        element.style.fill = color;
        element.style.setProperty('fill', color, 'important');
    }
    
    // 方法2: 设置 fill 属性
    element.setAttribute('fill', color);
    
    // 方法3: 更新 style 属性（类似 rollStateFun 的方式）
    const currentStyle = element.getAttribute('style') || '';
    const cleanedStyle = currentStyle.replace(/fill\s*:\s*[^;]+;?/gi, '').trim();
    const newStyle = cleanedStyle ? `${cleanedStyle}; fill: ${color} !important;` : `fill: ${color} !important;`;
    element.setAttribute('style', newStyle);
}

const state:any = {
    0:"#00FF00",
    1:"#FA8072",
    2:"#F60000",
    3:"#FFFF00"
}